<form id="<?php echo $uniqid;?>" method="post" style="padding: 0 0 10px 0;">
    <table border="0" width="100%" cellspacing="1" cellpadding="0" class="formtable">
        <tr>
            <td>
                <div class="left-goods display-flex"
                     style="justify-content: space-between; padding:20px 50px 20px 20px">
                    <div class="display-flex">
                        <div class="goods-img" v-if="params.goods_image">
                            <img :src="params.goods_image" class="table-img" style="max-height: 70px; flex:1">
                        </div>
                        <div class="goods-msg">
                            <div>{{params.goods_title}}</div>
                            <div>规格：{{params.goods_sku_text}}</div>
                        </div>
                    </div>
                    <div class="goods-price">
                        <div class="color-FF5959">单价: <span style="color: red"> ￥{{params.goods_price}}</span></div>
                        <div><span style="margin-right: 6px;">数量: *</span>{{params.goods_num}}</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="aftersale-status" style="padding: 25px 50px 25px 40px">
                    <div class="display-flex" style="justify-content: space-between">
                        <div>售后类型：<span class="color-F8A92B">{{params.type | aftersaleType}}</span></div>
                        <div>退款金额：<span class="color-F8A92B">{{params.item.refund_fee}}</span>元</div>
                    </div>
                    <div class="display-flex" style="justify-content: space-between">
                        <div>售后单号：{{params.aftersale_sn}}</div>
                        <div>申请时间：{{params.created_at}}</div>
                    </div>

                    <div class="display-flex" style="justify-content: space-between">
                        <div>寄回快递公司：{{params.return && params.return.express_name}}</div>
                        <div>寄回快递单号：{{params.return && params.return.express_no}}</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="aftersale-msg" style="padding: 25px 50px 25px 40px">
                    <div v-if="params.order">订单编号：{{params.order && params.order.order_sn}}<span v-if="params.order.is_first==1" style="color: #ff6060">(首.单)</span></div>
                    <div class="display-flex" style="justify-content: space-between">
                        <div v-if="params.member">用户信息：{{params.member.nickname}}</div>
                        <div v-if="params.member">联系方式：{{params.member.phone}}</div>
                        <div>物流状态：{{params.dispatch_status | dispatchStatus}}</div>
                    </div>
                    <div class="display-flex" style="justify-content: space-between">
                        <div>运费金额：{{params.dispatch_fee}} 元</div>
                        <div>优惠金额：{{params.discount_fee}} 元</div>
                        <div>实付金额：<span v-if="params.order"
                                        class="color-FF5959">{{params.order && params.order.pay_fee}}</span>元
                        </div>
                    </div>

                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="custom-steps-msg" style="padding:50px 0;">
                    <el-steps :active="stepActive" align-center finish-status="success">
                        <el-step title="买家申请售后"
                                 :description="stepActive>=1?params.created_at:''">
                        </el-step>
                        <el-step title="售后申请处理中"
                                 :description="stepActive>=2?(params.logs.length>=2?params.logs[params.logs.length-2].updated_at:params.updated_at):''">
                        </el-step>
                        <el-step :title="params.aftersale_status | aftersaleStatus"
                                 :description="stepActive==3?params.updated_at:''">
                        </el-step>
                    </el-steps>
                </div>
            </td>
        </tr>
        <tr>
            <td style="padding: 0">
                <div class="custom-afterasle-operation">
                    <div class="operation-title display-flex">
                        <i class="el-icon-warning-outline color-7438D5"></i>
                        <div style="font-size: 22px">{{params.aftersale_status | aftersaleStatus}}</div>
                    </div>
                    <div class="operation-tip">
                        {{params.aftersale_status_desc}}
                        <span style="color: #ff6600" v-if="params.item.refund_fee>0">
                            , 已退款 {{params.item.refund_fee}} 元
                        </span>
                    </div>
                    <div class="operation-btn display-flex">
                        <div class="common-btn agree-btn display-flex color-7438D5" v-if="(params.aftersale_status==0 || params.aftersale_status==1) && params.type=='return'"
                             @click="operationfunc('agree-apply','dialog')">同意申请
                        </div>
                        <div class="common-btn agree-btn display-flex color-7438D5" v-if="params.aftersale_status==2 || ((params.aftersale_status==0 || params.aftersale_status==1) && params.type=='refund')"
                             @click="operationfunc('agree-refund','dialog')">确认退款
                        </div>
                        <div class="common-btn refuse-btn display-flex" v-if="params.aftersale_status==0 || params.aftersale_status==1"
                             @click="operationfunc('reject-refund','dialog')">拒绝申请
                        </div>
                        <div class="common-btn finish-btn display-flex color-7438D5" v-if="params.aftersale_status==0 || params.aftersale_status==1 || params.aftersale_status==2"
                             @click="operationfunc(null,'finish-aftersale')">售后完成
                        </div>
                    </div>
                    <div class="color-F8A92B tips">温馨提示：</div>
                    <div class="color-999 tips-1">1、如果同意申请，请发送正确的退货地址给买家。</div>
                    <div class="color-999 tips-2">2、如果拒绝申请，请发送给买家拒绝理由。</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="custom-afterasle-record" style="padding: 25px 50px 25px 40px">
                    <div class="afterasle-record-title display-flex">
                        <div style="font-size: 16px">售后记录</div>
                        <div class="color-7438D5 click-reply" @click="operationfunc('reply-msg','dialog')">点击回复
                        </div>
                    </div>
                    <div class="afterasle-record-container" v-for="item in params.logs">
                        <div class="display-flex record-title-container">
                            <div class="record-title">{{item.reason}}</div>
                            <div class="color-999">
                                {{item.created_at}}
                            </div>
                        </div>

                        <div class="record-reason color-999" v-html="item.content"></div>
                        <div class="record-images">
                            <img v-for="it in item.images_arr" :src="it"/>
                        </div>
                    </div>
                </div>
                </div>
            </td>
        </tr>
    </table>
</form>
<div id="orderaftersaleeditdlg" class="easyui-dialog" style="width:450px; height:300px;" title="信息框" closed="true"></div>

<script>
    var orderaftersaleeditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            stepActive: 1
        },
        filters: {
            aftersaleType(value) {
                // refund=退款,return=退货,other=其他
                switch (value) {
                    case 'refund':
                        return '退款';
                    case 'return':
                        return '退货';
                    case 'other':
                        return '其他';
                }
            },
            dispatchStatus(value) {
                // 0=未发货,1=已发货,2=已收货
                switch (parseInt(value)) {
                    case 0:
                        return '未发货';
                    case 1:
                        return '已发货';
                    case 2:
                        return '已收货';
                }
            },
            aftersaleStatus(value) {
                // 售后状态:-1=拒绝,0=未处理,1=处理中,2=售后完成
                switch (parseInt(value)) {
                    case -2:
                        return '已取消';
                    case -1:
                        return '拒绝';
                    case 0:
                        return '未处理';
                    case 1:
                        return '处理中';
                    case 2:
                        return '同意售后';
                    case 3:
                        return '售后完成';
                }
            },
            refund(value) {
                // -1=拒绝退款,0=无,1=申请中,2=同意
                switch (parseInt(value)) {
                    case -1:
                        return '拒绝退款';
                    case 0:
                        return '无';
                    case 1:
                        return '申请中';
                    case 2:
                        return '同意';
                    case 3:
                        return '退款完成';
                }
            },
            dispatchType(value) {
                // express=物流快递,selfetch=用户自提,store=商户配送,autosend=自动发货
                switch (value) {
                    case 'express':
                        return '物流快递';
                    case 'selfetch':
                        return '用户自提';
                    case 'store':
                        return '商户配送';
                    case 'autosend':
                        return '自动发货';
                }
            },
            platform(value) {
                // H5=H5,wxOfficialAccount=微信公众号,wxMiniProgram=微信小程序,App=App
                switch (value) {
                    case 'H5':
                    case 'App':
                        return value;
                    case 'wxOfficialAccount':
                        return '微信公众号';
                    case 'wxMiniProgram':
                        return '微信小程序';
                }
            },
            type(value) {
                switch (value) {
                    case 'goods':
                        return '商城订单';
                    case 'score':
                        return '积分订单';
                }
            },
            payType(value) {
                // wechat=微信支付,alipay=支付宝,wallet=钱包支付,score=积分支付
                switch (value) {
                    case 'wechat':
                        return '微信支付';
                    case 'alipay':
                        return '支付宝';
                    case 'wallet':
                        return '钱包支付';
                    case 'score':
                        return '积分支付';
                    case 'JoinPay-wx':
                        return '汇聚支付-微信';
                    case 'JoinPay-ali':
                        return '汇聚支付-支付宝';
                    case 'pickgoods':
                        return '提货卡';
                    default:
                        return '未支付';
                }
            },
            formatDate(nS) {
                return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
            }
        },
        methods: {
            init() {
                this.changeSteps();
            },
            operationfunc(type, optType) {
                if (optType==='finish-aftersale'){
                    $.messager.confirm('提示', '确定售后完成吗？', function (r) {
                        if (r) {
                            $.messager.progress();
                            $.post('/admin/orderaftersale/finish', {id: orderaftersaleeditVm.params.id}, function (data) {
                                $.messager.progress('close');
                                if (parseInt(data.ret) === 0) {
                                    orderaftersaleeditVm.params.aftersale_status = 3;
                                    orderaftersaleeditVm.params.aftersale_status_desc = '服务已完成，感谢您的支持';
                                    orderaftersaleeditVm.init();
                                    $.messager.show({
                                        title: '提示',
                                        msg: data.msg,
                                        timeout: 3000,
                                        showType: 'slide'
                                    });
                                    orderaftersaleVm.init();
                                } else {
                                    $.messager.alert('提示', data.msg, 'warning');
                                }
                            }, 'json');
                        }
                    });
                }else{
                    switch (type) {
                        case 'agree-apply':
                            $.messager.prompt('同意申请', '确认同意退货申请吗?', function (r) {
                                if (r) {
                                    $.post('/admin/orderaftersale/agreeApply', {id: orderaftersaleeditVm.params.id}, function (data) {
                                        if (data.ret === 0) {
                                            orderaftersaleeditVm.params.aftersale_status = 2;
                                            $.messager.show({
                                                title: '提示',
                                                msg: data.msg,
                                                timeout: 3000,
                                                showType: 'slide'
                                            });
                                            orderaftersaleVm.init();
                                        } else {
                                            $.messager.alert('提示', data.msg, 'warning');
                                        }
                                    }, 'json');
                                }
                            });
                            break;
                        case 'agree-refund':
                            let pay_price = orderaftersaleeditVm.params.item.pay_price;
                            $.messager.prompt('同意退款', '最多可退 '+pay_price+' 元, 退款时请与买家协商好, 此操作不可撤销', function (r) {
                                if (r) {
                                    let money = parseFloat(r).toFixed(2);
                                    if(money>pay_price){
                                        $.messager.alert('提示', '退款金额不能大于订单支付金额', 'warning');
                                        return;
                                    }
                                    if(money<0){
                                        $.messager.alert('提示', '退款金额不能小于 0', 'warning');
                                        return;
                                    }
                                    $.post('/admin/orderaftersale/agree', {id: orderaftersaleeditVm.params.id, refund_money: r}, function (data) {
                                        if (data.ret === 0) {
                                            orderaftersaleeditVm.params.aftersale_status = 3;
                                            $.messager.show({
                                                title: '提示',
                                                msg: data.msg,
                                                timeout: 3000,
                                                showType: 'slide'
                                            });
                                            orderaftersaleVm.init();
                                        } else {
                                            $.messager.alert('提示', data.msg, 'warning');
                                        }
                                    }, 'json');
                                }
                            });
                            break;
                        case 'reject-refund':
                            $.messager.prompt('拒绝申请', '请输入拒绝理由:', function (r) {
                                if (r) {
                                    $.post('/admin/orderaftersale/reject', {id: orderaftersaleeditVm.params.id, refuse_msg: r}, function (data) {
                                        if (data.ret === 0) {
                                            orderaftersaleeditVm.params.aftersale_status = -1;
                                            orderaftersaleeditVm.params.memo = data.data;
                                            orderaftersaleVm.init();
                                        } else {
                                            $.messager.alert('提示', data.msg, 'warning');
                                        }
                                    }, 'json');
                                }
                            });
                            break;
                        case 'reply-msg':
                            $("#orderaftersaleeditdlg").dialog({
                                title: '编辑信息',
                                closed: false,
                                width: 450,
                                height: 300,
                                cache: false,
                                href: '/admin/orderaftersale/reply?id=' + orderaftersaleeditVm.params.id,
                                modal: true,
                                buttons: [{
                                    text: '保存',
                                    id: 'replysubmit',
                                    iconCls: 'icon-ok',
                                }, {
                                    text: '关闭',
                                    iconCls: 'icon-no',
                                    handler: function () {
                                        $("#orderaftersaleeditdlg").dialog('close');
                                    }
                                }]
                            });
                            break;
                    }
                }
            },
            changeSteps() {
                if (this.params.aftersale_status == -1 || this.params.aftersale_status == -2 || this.params.aftersale_status == 3) {
                    this.stepActive = 3;
                }else if (this.params.aftersale_status == 2) {
                    this.stepActive = 2;
                }else {
                    this.stepActive = this.params.aftersale_status + 1;
                }
            },
        }
    });
    $(function () {
        orderaftersaleeditVm.init();
        $('#<?php echo $uniqid;?> .good-list').width($(window).width() - $("#leftMenu").width() - 230);
        $('#ordersubmit').click(function (data) {
            orderaftersaleeditVm.submit();
        });
    });
</script>

<style>
    .color-999 {
        color: #999;
    }

    .color-FF5959 {
        color: #FF5959;
    }

    .color-F8A92B {
        color: #F8A92B;
    }

    .record-reason, .record-describe {
        margin-bottom: 10px;
    }

    .afterasle-record-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 18px;
        justify-content: space-between;
    }

    .afterasle-record-container {
        padding-left: 20px;
    }

    .record-title {
        margin-right: 60px;
    }

    .custom-afterasle-operation {
        padding: 40px 0 40px 50px;
        border: 0px solid #E6E6E6;
        border-top: none;
        margin-bottom: 20px;
    }

    .operation-title {
        margin-bottom: 10px;
        color: #333;
        font-weight: 600;
        font-size: 20px;
    }

    .operation-title i {
        font-size: 30px;
        margin-right: 18px;
    }

    .color-7438D5 {
        color: #7438D5;
    }

    .operation-tip {
        padding-left: 48px;
        font-size: 14px;
        margin-bottom: 40px;
    }

    .operation-btn {
        padding-left: 48px;
        margin-bottom: 82px;
    }

    .common-btn {
        width: 98px;
        height: 36px;
        line-height: 36px;
        background: #7438D5;
        border-radius: 4px;
        justify-content: center;
        cursor: pointer;
        color: #fff;
    }

    .agree-btn {
        margin: 0 15px;
        border: 1px solid #7438D5;
        color: #fff;
    }

    .refuse-btn {
        margin: 0 15px;
        border: 1px solid #7438D5;
        color: #fff;
    }

    .finish-btn
    {
        margin: 0 15px;
        background: #fff;
        border: 1px solid #7438D5;
        color: #7438D5;
    }

    .operation-title {
        margin-bottom: 10px;
        color: #333;
        font-weight: 600;
        font-size: 20px;
    }

    .tip-container {
        display: flex;
        margin-bottom: 10px;
    }

    .order-main-btn {
        margin-right: 20px;
        width: 88px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 4px;
        background: #753ECD;
        cursor: pointer;
    }

    .order-detail-tip-title {
        color: #FFB333;
    }

    .order-detail-remark {
        color: #7438D5;
    }

    .all-refund-money-text {
        color: #FF5959;
        cursor: pointer;
    }

    .order-msg-right-money {
        font-size: 20px;
        color: #FF5000;
    }

    .order-msg-center {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .order-msg-center .el-steps.el-steps--horizontal {
        width: 84%;
    }

    .el-steps {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-steps--simple {
        padding: 13px 8%;
        border-radius: 4px;
        background: #f5f7fa;
    }

    .el-steps--horizontal {
        white-space: nowrap;
    }

    .el-steps--vertical {
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .el-step {
        position: relative;
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }

    .el-step:last-of-type .el-step__line {
        display: none;
    }

    .el-step:last-of-type.is-flex {
        -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }

    .el-step:last-of-type .el-step__description,
    .el-step:last-of-type .el-step__main {
        padding-right: 0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-process {
        color: #303133;
        border-color: #303133;
    }

    .el-step__head.is-wait {
        color: #c0c4cc;
        border-color: #c0c4cc;
    }

    .el-step__head.is-success {
        color: #67c23a;
        border-color: #67c23a;
    }

    .el-step__head.is-error {
        color: #f56c6c;
        border-color: #f56c6c;
    }

    .el-step__head.is-finish {
        color: #7438d5;
        border-color: #7438d5;
    }

    .el-step__icon {
        position: relative;
        z-index: 1;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
    }

    .el-step__icon.is-text {
        color: #fff;
        border-radius: 50%;
        border: 2px solid;
        border-color: inherit;
    }

    .el-step__icon.is-icon {
        width: 40px;
    }

    .el-step__icon-inner {
        display: inline-block;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        font-weight: 700;
        line-height: 1;
        color: inherit;
    }

    .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 25px;
        font-weight: 400;
    }

    .el-step__icon-inner.is-status {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    .el-step__line {
        position: absolute;
        border-color: inherit;
        background-color: #c0c4cc;
    }

    .el-step__line-inner {
        display: block;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        -webkit-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 0;
        height: 0;
    }

    .el-step__main {
        white-space: normal;
        text-align: left;
    }

    .el-step__title {
        font-size: 14px;
        line-height: 38px;
    }

    .el-step__title.is-process {
        font-weight: 500;
        color: #303133;
    }

    .el-step__title.is-wait {
        color: #c0c4cc;
    }

    .el-step__title.is-success {
        color: #444;
    }

    .el-step__title.is-error {
        color: #f56c6c;
    }

    .el-step__title.is-finish {
        color: #7438d5;
    }

    .el-step__description {
        padding-right: 10%;
        margin-top: -5px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
    }

    .el-step__description.is-process {
        color: #303133;
    }

    .el-step__description.is-wait {
        color: #c0c4cc;
    }

    .el-step__description.is-success {
        color: #999;
    }

    .el-step__description.is-error {
        color: #f56c6c;
    }

    .el-step__description.is-finish {
        color: #7438d5;
    }

    .el-step.is-horizontal {
        display: inline-block;
    }

    .el-step.is-horizontal .el-step__line {
        height: 1px;
        top: 11px;
        left: 0;
        right: 0;
    }

    .el-step.is-vertical {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .el-step.is-vertical .el-step__head {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        width: 24px;
    }

    .el-step.is-vertical .el-step__main {
        padding-left: 10px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-vertical .el-step__title {
        line-height: 24px;
        padding-bottom: 8px;
    }

    .el-step.is-vertical .el-step__line {
        width: 2px;
        top: 0;
        bottom: 0;
        left: 11px;
    }

    .el-step.is-vertical .el-step__icon.is-icon {
        width: 24px;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step.is-center .el-step__main {
        text-align: center;
    }

    .el-step.is-center .el-step__description {
        padding-left: 20%;
        padding-right: 20%;
    }

    .el-step.is-center .el-step__line {
        left: 50%;
        right: -50%;
    }

    .el-step.is-simple {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .el-step.is-simple .el-step__head {
        width: auto;
        font-size: 0;
        padding-right: 10px;
    }

    .el-step.is-simple .el-step__icon {
        background: 0 0;
        width: 16px;
        height: 16px;
        font-size: 12px;
    }

    .el-step.is-simple .el-step__icon-inner[class*="el-icon"]:not(.is-status) {
        font-size: 18px;
    }

    .el-step.is-simple .el-step__icon-inner.is-status {
        -webkit-transform: scale(0.8) translateY(1px);
        transform: scale(0.8) translateY(1px);
    }

    .el-step.is-simple .el-step__main {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .el-step.is-simple .el-step__title {
        font-size: 16px;
        line-height: 20px;
    }

    .el-step.is-simple:not(:last-of-type) .el-step__title {
        max-width: 50%;
        word-break: break-all;
    }

    .el-step.is-simple .el-step__arrow {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .el-step.is-simple .el-step__arrow::after,
    .el-step.is-simple .el-step__arrow::before {
        content: "";
        display: inline-block;
        position: absolute;
        height: 15px;
        width: 1px;
        background: #c0c4cc;
    }

    .el-step.is-simple .el-step__arrow::before {
        -webkit-transform: rotate(-45deg) translateY(-4px);
        transform: rotate(-45deg) translateY(-4px);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .el-step.is-simple .el-step__arrow::after {
        -webkit-transform: rotate(45deg) translateY(4px);
        transform: rotate(45deg) translateY(4px);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

    .el-step.is-simple:last-of-type .el-step__arrow {
        display: none;
    }

    .el-step.is-center .el-step__head {
        text-align: center;
    }

    .el-step__head.is-success {
        color: #7536D0;
        border-color: #7536D0;
    }

    .el-step__head {
        position: relative;
        width: 100%;
    }

    .el-step__head.is-success .el-step__icon.is-text {
        background: #7536D0;
    }

    .el-step__icon.is-text {
        background: #eee;
        border: 4px solid #fff;
    }

    .el-step__icon.is-text {
        border-radius: 50%;
    }

    .el-step__icon {
        width: 38px;
        height: 38px;
    }

    .el-step.is-horizontal .el-step__line {
        top: 18px;
    }

    .el-table th .cell, .el-table td .cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-table th.is-leaf {
        border-bottom: none;
    }

    .el-table td, .el-table th, .el-table th.is-leaf {
        border-color: #f7f7f7;
    }

    .el-table th {
        font-size: 13px;
    }

    .el-table th {
        background: #F9F9F9;
    }

    .el-table th {
        padding: 7px 0;
    }

    .el-table, .el-table thead, .el-table th {
        color: #444;
        font-weight: 500;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .theme-color {
        color: #7536D0;
    }
</style>
